<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }
  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cells {
    margin-top: 0;
  }
  .weui-cells_form {
    background: #fbfbfb;
  }
  .weui-cell {
    background: #fff;
  }
  #acts span {
    font-size: 14px;
  }
  .halfbtn {
    display: inline-block;
    width: 49%;
  }
  .weui-label{
    /*width: 130px;*/
    text-align: left;
  }

  .weui-select {
    height: auto;
    line-height: normal;
  }
  *{
    list-style:none;
  }
  /*body{*/

  /*}*/
  .weui-cell_select {
    padding: 10px 15px;
  }
  .weui-cells__title {
    text-align: left;
  }
  .hide {
    display: none;
  }
  #acts {
    font-size: 0;
  }
  #acts span {
    font-size: 14px;
  }
  input.time {
    border: none;
    font-size: 16px;
    padding-left: 10px;
  }

</style>
<template>
  <div class="comon">
    <div style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
     修改销售合同
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px" />
      </a>
    </div>
    <div class="weui-cells weui-cells_form">
        <form method="post" id="formid">

      <input type="hidden" name ='guid' :value="purchasecontract.guid">
          <div class="cellgroup">

            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">合同名称</label></div>
              <div class="weui-cell__bd">
                <input class="weui-input" type="text"  :value="purchasecontract.name" id="name"   name="name" placeholder="请填写合同名称" >
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">甲方 </label></div>
              <div class="weui-cell__bd">
                <select class="weui-select" name="partaorgguid"  id="partaorgguid" v-model="purchasecontract.partaorgguid" >
                  <option value="" disabled>请选择</option>
                  <option    v-for="(item, index) in organizations" :key="item.guid" :value="item.guid" >{{item.name}}</option>
                </select>
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">乙方</label></div>
              <div class="weui-cell__bd">
                <select class="weui-select" name="partborgguid" id="partborgguid" v-model="purchasecontract.partborgguid">
                  <option value="" disabled>请选择</option>
                  <option    v-for="(item, index) in organizations" :key="item.guid" v-if="purchasecontract.partaorgguid != item.guid"   :value="item.guid">{{item.name}}</option>
                </select>
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">开始时间</label></div>
              <div class="weui-cell__bd">
                <input type="text" id='starttime' class="time" :value="purchasecontract.starttime" name="starttime" placeholder="请选择开始时间" />
              </div>
            </div>

            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">状态 </label></div>
              <div class="weui-cell__bd">
                <select class="weui-select" name="status" v-model="purchasecontract.status">
                  <option value="1" >生效</option>
                  <option value="0" >失效</option>
                </select>
              </div>
            </div>
        </div>
        <div class="oitem"  v-for="(item, index) in purchasecontract.items">

          <input type="hidden" :name="appand(index,'guid')" :value="item.guid"/>
          <div class="weui-cells__title">货品明细{{index +1}}
              <p id="acts" style="float: right;color: #1aad19;"  v-show="index+1 == purchasecontract.items.length">
                <span id="addItem" style="padding-right: 5px;" >添加</span>
                <span></span><span v-show="purchasecontract.items.length !=1"  id="delItem" style="padding-left: 5px;" :guid="item.guid">删除</span>
              </p>
            </div>
            <div class="weui-cell weui-cell_select fir">
              <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
              <div class="weui-cell__bd">
                <select class="weui-select" :name="appand(index,'productguid')" v-model="item.productguid">
                  <option value="" disabled>请选择</option>
                  <option   v-for="(item, index) in products" :key="item.guid" :value="item.guid">{{item.productname}}</option>
                </select>
              </div>
            </div>
            <div class="weui-cell weui-cell_select">
              <div class="weui-cell__hd"><label class="weui-label">规格</label></div>
              <div class="weui-cell__bd">
                <select class="weui-select" :name="appand(index,'specguid')"   v-model="item.specguid">
                  <option value="" disabled>请选择</option>
                  <option   v-for="(item, index) in specifications" :key="item.guid" :value="item.guid">{{item.name}}</option>
                </select>
              </div>
            </div>
          <div class="weui-cell weui-cell_select">
            <div class="weui-cell__hd"><label class="weui-label">价格</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text"  :name="appand(index,'price')"   :value="item.price"  placeholder="请填写价格" >
            </div>
          </div>
          </div>
        <div class="oitem hide">
            <div class="weui-cells__title">货品明细 {{itemsLength +1}}</div>
            <div class="weui-cell weui-cell_select fir">
              <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
              <div class="weui-cell__bd">
                <select class="weui-select" :name="appand(itemsLength +1,'productguid')"  disabled="true">
                  <option value="" disabled>请选择</option>
                  <option   v-for="(item, index) in products" :key="item.guid" :value="item.guid">{{item.productname}}</option>
                </select>
              </div>
            </div>
          <div class="weui-cell weui-cell_select">
            <div class="weui-cell__hd"><label class="weui-label">规格</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select" :name="appand(itemsLength +1,'specguid')"   disabled="true" >
                <option value="" disabled>请选择</option>
                <option   v-for="(item, index) in specifications" :key="item.guid" :value="item.guid">{{item.name}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select">
            <div class="weui-cell__hd"><label class="weui-label">价格</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text"  :name="appand(itemsLength +1,'price')"   disabled="true"   placeholder="请填写价格" >
            </div>
          </div>
          </div>
          <div class="oitem hide">
            <div class="weui-cells__title">货品明细 {{itemsLength +2}}</div>
            <div class="weui-cell weui-cell_select fir">
              <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
              <div class="weui-cell__bd">
                <select class="weui-select" :name="appand(itemsLength +2,'productguid')"   disabled="true">
                  <option value="" disabled>请选择</option>
                  <option   v-for="(item, index) in products" :key="item.guid" :value="item.guid">{{item.productname}}</option>
                </select>
              </div>
            </div>
            <div class="weui-cell weui-cell_select">
              <div class="weui-cell__hd"><label class="weui-label">规格</label></div>
              <div class="weui-cell__bd">
                <select class="weui-select" :name="appand(itemsLength +2,'specguid')"   disabled="true" >
                  <option value="" disabled>请选择</option>
                  <option   v-for="(item, index) in specifications" :key="item.guid" :value="item.guid">{{item.name}}</option>
                </select>
              </div>
            </div>
            <div class="weui-cell weui-cell_select">
              <div class="weui-cell__hd"><label class="weui-label">价格</label></div>
              <div class="weui-cell__bd">
                <input class="weui-input" type="text"  :name="appand(itemsLength +2,'price')"  disabled="true"   placeholder="请填写价格" >
              </div>
            </div>
          </div>
          <div class="oitem hide">
            <div class="weui-cells__title">货品明细 {{itemsLength +3}}</div>
            <div class="weui-cell weui-cell_select fir">
              <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
              <div class="weui-cell__bd">
                <select class="weui-select"  :name="appand(itemsLength +3,'productguid')"    disabled="true">
                  <option value="" disabled>请选择</option>
                  <option  v-for="(item, index) in products" :key="item.guid" :value="item.guid">{{item.productname}}</option>
                </select>
              </div>
            </div>
            <div class="weui-cell weui-cell_select">
              <div class="weui-cell__hd"><label class="weui-label">规格</label></div>
              <div class="weui-cell__bd">
                <select class="weui-select" :name="appand(itemsLength +3,'specguid')"   disabled="true"  >
                  <option value="" disabled>请选择</option>
                  <option   v-for="(item, index) in specifications" :key="item.guid" :value="item.guid">{{item.name}}</option>
                </select>
              </div>
            </div>
            <div class="weui-cell weui-cell_select">
              <div class="weui-cell__hd"><label class="weui-label">价格</label></div>
              <div class="weui-cell__bd">
                <input class="weui-input" type="text"  :name="appand(itemsLength +3,'price')"     disabled="true"   placeholder="请填写价格" >
              </div>
            </div>
          </div>
          <div class="oitem hide">
            <div class="weui-cells__title">货品明细 {{itemsLength +4}}</div>
            <div class="weui-cell weui-cell_select fir">
              <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
              <div class="weui-cell__bd">
                <select class="weui-select" :name="appand(itemsLength +4,'productguid')"    disabled="true">
                  <option value="" disabled>请选择</option>
                  <option    v-for="(item, index) in products" :key="item.guid" :value="item.guid">{{item.productname}}</option>
                </select>
              </div>
            </div>
            <div class="weui-cell weui-cell_select">
              <div class="weui-cell__hd"><label class="weui-label">规格</label></div>
              <div class="weui-cell__bd">
                <select class="weui-select" :name="appand(itemsLength +4,'specguid')"   disabled="true">
                  <option value="" disabled>请选择</option>
                  <option   v-for="(item, index) in specifications" :key="item.guid" :value="item.guid">{{item.name}}</option>
                </select>
              </div>
            </div>
            <div class="weui-cell weui-cell_select">
              <div class="weui-cell__hd"><label class="weui-label">价格</label></div>
              <div class="weui-cell__bd">
                <input class="weui-input" type="text"  :name="appand(itemsLength +4,'price')"   disabled="true"   placeholder="请填写价格" >
              </div>
            </div>
          </div>

          <div class="weui-btn-area">
          <a class="weui-btn weui-btn_primary halfbtn subbtn"  href="javascript:" @click="send">提交</a>
          <a class="weui-btn weui-btn_primary halfbtn"  href="javascript:" @click="$router.back(-1)" id="sub">返回</a>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'UpdPurchasecontract',
    data () {
      return {
        openid: localStorage.openid,
        guid: '',
        type: 1,
        pickinglist: {},
        items: [],
        products: [],
        specifications: [],
        purchasecontract:{},
          organizations:[],
          itemsLength:0,
          partaorgguid:""
      }
    },
    created() {
      window.addEventListener('setItem', ()=> {
        this.openid = localStorage.getItem('openid');
      })
    },
    mounted () {
        $("#starttime").calendar();
      let that = this;
      let that2 = this;
      this.guid = this.$route.query.guid;
      this.type = this.$route.query.type;
      //获取回显数据
      this.getApplyInfo(this.$route.query.guid);
      this.getPurchasecontract(this.guid);

      //添加明细item
      $('form').on('click', '#addItem', function () {
        $('.oitem:hidden').eq(0).find('input').attr("disabled",false);
        $('.oitem:hidden').eq(0).find('textarea').attr("disabled",false);
        $('.oitem:hidden').eq(0).find('select').attr("disabled",false);
        $('.oitem:hidden').eq(0).show();
        updateActBtns();
      })



      //删除明细
      $('form').on('click', '#delItem', function () {
        var elm = $(this).parents('.oitem');
        var that = this;



        $.confirm("确定要删除该货品明细吗？", function () {
          elm.find('input').val('');
          elm.find('textarea').val('');
          elm.hide();
          $('.oitem:hidden').eq(0).find('input').attr("disabled",true);
          $('.oitem:hidden').eq(0).find('textarea').attr("disabled",true);
          $('.oitem:hidden').eq(0).find('select').attr("disabled",true);
          var itemsGuid = that.attributes.guid;
          console.log(itemsGuid);

          if(itemsGuid != undefined){

              that2.delItem(itemsGuid.value)
          }
          updateActBtns();
        })
      })
      //调整添加、删除按钮位置
      function updateActBtns() {
          for(var i=0; i<that.itemsLength ; i ++ ){
              $('#acts').remove();
          }
        var actHtml = '<p id="acts" style="float: right;color: #1aad19;"><span id="addItem" style="padding-right: 5px;">添加</span><span>|</span><span id="delItem" style="padding-left: 5px;">删除</span></p>';
        if ($('.oitem:visible').length == 5 + that.purchasecontract.items.length -1 ) {
          actHtml = '<p id="acts" style="float: right;color: #1aad19;"><span id="delItem" style="padding-left: 5px;">删除</span></p>';
        } else if ($('.oitem:visible').length == 1 ) {
          var actHtml = '<p id="acts" style="float: right;color: #1aad19;"><span id="addItem" style="padding-right: 5px;">添加</span></p>';
        }

        $('.oitem:visible:last').find('.weui-cells__title').append(actHtml);
      }
    },
    computed: {

    },
    methods: {
        appand:function (index,key){
            return "entity.items[" + index + "]." + key;
        },
      getApplyInfo: function(guid) {
        this.axios({
          method: 'get',
          url: '/sales/Purchasecontract!getBaseInfo.action',
          params: {pickinglistid: guid}
        }).then((response) => {
          if (response.data.msg == 'success') {
            let data = response.data;
            console.log(data);
            this.products = data.products;
            this.specifications = data.spes;
            this.organizations = data.organization;
          } else {
            this.toastError("系统错误");
          }

        })
      },
        delItem: function(guid) {
            this.axios({
                method: 'get',
                url: '/sales/Purchasecontract!delItems.action',
                params: {guid: guid}
            }).then((response) => {
                console.log()

                if (response.data.msg == 'success') {

                } else {
                    this.toastError("系统错误");
                }

            })
        },
        getPurchasecontract: function(guid) {
            this.axios({
                method: 'get',
                url: '/sales/Purchasecontract!getList.action',
                params: {guid: guid,pageSize:1,pageNo:1,status:1}
            }).then((response) => {
                if (response.data.msg == 'success') {
                this.purchasecontract = response.data.purchasecontract.rows[0];
                this.itemsLength = this.purchasecontract.items.length;

                } else {
                    this.toastError("系统错误");
                }
            })
        },


      send: function() {
          if (!this.checkSubmit()) {
              return false;
          }
        //防止重复提交
        $('.subbtn').attr("disabled",true).css("pointer-events","none");
        //显示提交状态
        $.showLoading("正在提交");

        let that  = this;
        this.axios({
          method: 'post',
          url: '/sales/Purchasecontract!update.action?pickinglistid=' + this.guid,
          params: this.serialize2Obj($("#formid").serializeArray())
        }).then(response => {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();

          if(response.data.msg == "success"){
            this.toastSuccess('操作成功!');
            this.$router.push({name: 'PurchasecontractList', query: {guid:that.pickinglist.guid}});

          }else if (response.data.msg == 'repeat'){
              this.toastText('合同明细中产品规格重复，请重新选择！');
          }else if (response.data.msg == 'itemEmpty'){
              this.toastText('合同明细价格和产品为空！');
          }else if (response.data.msg == 'error'){
            this.toastError('系统错误!');
          }
        }).catch(function (error) {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();
          that.toastError('系统错误');
        });

      },checkSubmit:function(){
            if(!this.isEmpty("name")){
                this.toastText('请输入合同名称');
                return  false;
            }
            if(!this.isEmpty("partaorgguid")){
                this.toastText('请选择甲方');
                return  false;
            }
            if(!this.isEmpty("partborgguid")){
                this.toastText('请选择乙方');
                return  false;
            }
            if(!this.isEmpty("starttime")){
                this.toastText('请选择开始时间');
                return  false;
            }
            return true;
        },
        isEmpty:function(domId){
            console.log($("#" + domId).val());


            if($("#" + domId).val() == null ||  $("#" + domId).val() ==''){
                return false;
            }else{
                return true;
            }
        }

    }
  }


</script>
